<template>
  <div class="template-upload">
    <el-button class="upload-btns" @click="quoteHandle">引用我的{{ type === 'ja' ? '教案' : type === 'sksp' ? '视频' : '资料' }}</el-button>
    <el-upload
      drag
      :action="uploadAction"
      :file-list="fileList"
      :on-success='uploadSuccess'
      :accept="accept"
      :before-upload="beforeUpload"
      :on-remove="uploadRemove"
      multiple
    > 
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <span class="supported-documents">支持扩展名：{{accept}}</span>
    </el-upload>
  </div>
</template>

<script lang="ts">
import { ref, Ref, inject } from 'vue'
import $ from '$'
import { ElMessage } from 'element-plus'
import Myquote from './my-quote.vue'

export default {
  components: { Myquote },
  props: {
    id: String,
    accept: String,
    type: String
  },
  setup( props, { emit } ) {
    let close: any = inject('close')
    let uploadAction = `${import.meta.env.VITE_APP_BASE_URL}/system/file/uploadFile`
    let fileList: Ref<any[]> = ref([])
    let newFileList: Ref<any[]> = ref([])

    // 上传成功回调
    const uploadSuccess = (response,file, fileList) => {
      let arr: Ref<any[]> = ref([])
      newFileList.value.push(response.json)
    }
    const uploadRemove = (file: any, fileList: any) => {
      newFileList.value = newFileList.value.filter(item => item.filePath !== file.response.json.filePath)
    }
    const beforeUpload = (file) => {
      let _list = props.accept.split(',')
      let isJPG: any = null
      if(_list.some(item => file.name.indexOf(item) !== -1)) {
         isJPG = true
      } else {
        isJPG = false
      }

      if (!isJPG) {
        ElMessage.error(`上传必须是${props.accept === ".doc,.docx,.pdf" ? "doc,docx,pdf" : "mp4,jpg,jpeg,png"}格式!`);
      }
      return isJPG;
    }
    // 确定发送请求
    const save = async (resolve, reject) => {
      // resolve(newFileList);
      let __params  = {
        fileList: newFileList.value,
        isPublic: 0,
        courseIndexId: props.id,
        type: props.accept === '.doc,.docx,.pdf' ? 5 : 3,
      };
      // 教案是5 说课视频是3
      let res = await $.http.json('/admin/material/saveUserMaterial', __params)
        if(res.result) {
          ElMessage.success('上传成功')
          resolve(res, props.accept);
        }else{
          ElMessage.error('未选择资料，请重新上传')
          reject()
        }
    }
    let quoteHandle = async () => { 
      let subjectId = localStorage.getItem('subjectId')
      let res = await $.http.post('/tiku/bookVersion/queryVresionBookTree', { subject: subjectId })
      let _list = res.json
      $.modal.create({ title: '引入我的资料', width: 784, component: Myquote, props: { accept: props.accept, type: props.type === 'ja' ? 5 : 3, id: props.id, dataList: _list }, zIndex: 2012 }).then((data) => {
        close()
        // newFileList.value.push(...data)
      })
    }
    return { close, uploadAction, newFileList, fileList , save, uploadSuccess, quoteHandle, beforeUpload, uploadRemove }
  }
  
}
</script>

<style lang="scss" scoped>
  .template-upload{
    margin: 0 auto;
    width: 62%;
    .upload-btns {
      float: right;
      margin-bottom: 10px;
    }
    .supported-documents{
      line-height: 30px;
      color: rgb(96, 98, 102);
    }
  }
</style>